<div class="nav-bar text-content-container">
  <a href="/" class="logo">XyloO</a>
  <div class="nav-collapse">
    <ul class="links">
      <li *ngFor="let item of mens">
        <a href="{{item.url}}">{{item.name}}</a>
      </li>
    </ul>
  </div>
  <div class="admin-box">
    <button nz-button nzType="primary" (click)="showModal()" *ngIf="!isLogin">
      <i nz-icon nzType="login" nzTheme="outline"></i>
      登录
    </button>
    <div *ngIf="isLogin">
      <button nz-button nzType="primary" (click)="logout()" *ngIf="isLogin">
        <i nz-icon nzType="logout" nzTheme="outline"></i>
        欢迎回来，{{showUserInfo.nickname}}！
      </button>
    </div>
  </div>
</div>

<nz-modal
  [(nzVisible)]="relogin.isVisibleLogin"
  nzTitle="登录"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="doLogin()"
  [nzOkLoading]="isOkLogining"
>
  <div class="login-info-box">
    <div class="login-info-key">账 号：</div>
    <input nz-input placeholder="请输入账号" [(ngModel)]="userInfo.username" />
  </div>
  <div class="login-info-box">
    <div class="login-info-key">密 码：</div>
    <nz-input-group [nzSuffix]="suffixTemplate">
      <input [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="请输入密码" [(ngModel)]="userInfo.password" />
    </nz-input-group>
    <ng-template #suffixTemplate>
      <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
    </ng-template>
  </div>
</nz-modal>
